import React from 'react'
import StateMixin from 'reflux-state-mixin'
import SrvTag from 'pages/serviceitems/components/srvtags.jsx'
import SrvItemStore from 'pages/serviceitems/stores/serviceItemStore.js';
import SrvItemAction from 'pages/serviceitems/actions/serviceItemAction.js'
import MenuStore from 'pages/framework/stores/menuStore'
import MenuAction from 'pages/framework/actions/menuAction'
import { Form , Checkbox, Input , Select , Button , message } from 'antd';

const createForm = Form.create;
const FormItem = Form.Item;
const Option = Select.Option;
let newSrvItem = React.createClass({
  mixins: [StateMixin.connect(SrvItemStore),StateMixin.connect(MenuStore)],
  getInitialState() {
    return {
      srvtags :[],
      srvStandard: null,
      models: []
    }
  },
  componentWillMount() {
    SrvItemAction.getSrvStandardList().then((data) => {
      this.setState({
        srvStandard:data
      })
    });
    SrvItemAction.getAllUsers();
    SrvItemAction.getModelList().then((data) => {
      this.setState({
        models:data
      })
    });
  },
  componentDidMount() {
    MenuAction.changeCurrent({
      "child": "服务项新增",
      "title": "服务项",
      "url": "serviceitems"
    })
  },
  addtags(value) {
    let tags = this.state.srvtags;
    tags.push(value.currentTarget.value);
    this.setState({
      srvtags:tags
    });
  },
  handleClose(key) {
    const tags = this.state.srvtags.filter(tag => (tag !== key) && tag);
    this.setState({ srvtags:tags });
  },
  handleSubmit() {
    this.props.form.validateFields((errors, values) => {
      if (errors) {
        return;
      }
      let data = {
        name: values.name,
        description: values.description,
        sortNo: values.sort,
        isRecommend: values.srvItemStatus ? 1 : 0,
        responsiblePersonId: values.srvResperson,
        phone: values.resphone,
        srvStandardId: values.srvStandard,
        srvTimePolicy: values.srvTimePolicy,
        cost: values.cost,
        processId: values.srvItsm,
        status: -1,
        tags:this.state.srvtags
      }
      SrvItemAction.createSrvItem(data).then((data) => {
        log(data);
        message.success('创建成功！', 1);
        window.location.href = '#/service/serviceitems';
      });
    });
  },
  checkphone(rule, value, callback) {
    let re = /^1\d{10}$/
    if (re.test(value)) {
      callback();
    } else {
      callback(new Error('手机号填写错误！'));
    }
  },
  goback() {
    window.history.go(-1);
  },
  render() {
    let srvStandards = this.state.srvStandard;
    let srvoption = [];
    if (srvStandards != null) {
      for (let i = 0;i < srvStandards.length;i++) {
        srvoption.push(<Option value={srvStandards[i].id}>{srvStandards[i].standardLevel}</Option>);
      }
    }
    let allUsers = this.state.users;
    let useroptions = [];
    if (allUsers != null) {
      for (let i = 0;i < allUsers.length;i++) {
        useroptions.push(<Option value={allUsers[i].userId}>{allUsers[i].userName}</Option>);
      }
    }
    let models = this.state.models;
    let modelsoptions = [];
    if (models != null) {
      for (let i = 0;i < models.length;i++) {
        modelsoptions.push(<Option value={models[i].id}>{models[i].name}</Option>);
      }
    }
    const { getFieldProps } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 8 },
    };
    const nameProps = getFieldProps('name', {
      rules: [{
        required: true,
        whitespace: true,
        message: '请输入名称',
      }],
    });
    const despProps = getFieldProps('description', {
      rules: [{
        required: true,
        whitespace: true,
        message: '请输入描述',
      }],
    });
    const srvisRecommend = getFieldProps('srvisRecommend', {
      initialValue: false, valuePropName: 'checked' 
    });

    const srvResperson = getFieldProps('srvResperson', {
      rules: [{
        required: true,
        whitespace: true,
        message: '请选择责任人',
      }],
    });

    const srvStandard = getFieldProps('srvStandard', {
      rules: [{
        required: true,
        whitespace: true,
        message: '请选择服务标准',
      }],
    });

    const srvTimePolicy = getFieldProps('srvTimePolicy', {
      rules: [{
        required: true,
        whitespace: true,
        message: '请选择服务时间',
      }],
    });

    const srvItsm = getFieldProps('srvItsm', {
      rules: [{
        required: true,
        whitespace: true,
        message: '请选择服务流程',
      }],
    });

    const resphone = getFieldProps('resphone', {
      rules: [{
        whitespace: true,
      },{
        validator: this.checkphone,
      }],
    });

    return (
      <div className="srvItem_detail">
      <h3 className="title">基本信息</h3>
        <div>
        <Form horizontal form={this.props.form}>
          <FormItem {...formItemLayout} hasFeedback
          label="名称">
          <Input {...nameProps} placeholder="请输入名称" />
          </FormItem>
          <FormItem {...formItemLayout} hasFeedback
          label="描述">
          <Input  type="textarea" {...despProps} placeholder="请输入描述" />
          </FormItem>
          <FormItem {...formItemLayout} hasFeedback
          label="责任人">
           <Select style={{ width: 200 }}
            {...srvResperson}
          >
            {useroptions}
          </Select>
          </FormItem>
          <FormItem {...formItemLayout} hasFeedback
          label="联系方式">
          <Input {...resphone} placeholder="请输入手机号码" />
          </FormItem>
          <FormItem {...formItemLayout} hasFeedback
          label="服务标准">
          <Select style={{ width: 200 }}
            {...srvStandard}
          >
            {srvoption}
          </Select>
          </FormItem>
          <FormItem {...formItemLayout} hasFeedback
          label="服务时间">
          <Select style={{ width: 200 }}
            {...srvTimePolicy}
          >
            <Option value="5*8">5*8</Option>
            <Option value="7*24">7*24</Option>
            <Option value="8小时工作制">8小时工作制</Option>
          </Select>
          </FormItem>
          <FormItem {...formItemLayout}
          label="费用">
          <Input {...getFieldProps('cost', { initialValue: '' })} placeholder="请输入名称" />
          </FormItem>
          <FormItem {...formItemLayout}
          label="排序">
          <Input {...getFieldProps('sort', { initialValue: '' })} placeholder="请输入名称" />
          </FormItem>
          <FormItem {...formItemLayout} hasFeedback
          label="服务流程">
          <Select defaultValue="0" style={{ width: 200 }}
            {...srvItsm}
          >
          {modelsoptions}    
          </Select>
          </FormItem>
          <FormItem {...formItemLayout} hasFeedback
          label="标签">
          <SrvTag  addtags={this.addtags} handleClose={this.handleClose} srvtags={this.state.srvtags} />
          </FormItem>
          <FormItem {...formItemLayout}
          label="设为热门服务">
          <Checkbox {...srvisRecommend}>是</Checkbox>
          </FormItem>
          <FormItem wrapperCol={{ span: 15, offset: 10 }}>
          <Button type="primary" onClick={this.handleSubmit}>提交</Button>
        </FormItem>
        </Form>
        </div>
      </div>
    )
  }
});
export default createForm()(newSrvItem);
